<template>
  <div :class="className" :style="{ height, width }" />
</template>

<script>
import echarts from 'echarts'
// require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data () {
    return {
      chart: null,
      timer: null
    }
  },
  mounted () {
    this.initChart()
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    // clearInterval(this.timer)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$el, 'macarons')

      const option = {
        title: {
          text: '用户访问来源',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // const option2 = {
      //   tooltip: {
      //     trigger: 'item',
      //     formatter: '{a} <br/>{b} : {c} ({d}%)'
      //   },
      //   legend: {
      //     left: 'center',
      //     bottom: '10',
      //     data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
      //   },
      //   series: [{
      //     name: 'WEEKLY WRITE ARTICLES',
      //     type: 'pie',
      //     roseType: 'radius',
      //     radius: [15, 95],
      //     center: ['50%', '38%'],
      //     data: [{
      //         value: 320,
      //         name: 'Industries'
      //       },
      //       {
      //         value: 240,
      //         name: 'Technology'
      //       },
      //       {
      //         value: 149,
      //         name: 'Forex'
      //       },
      //       {
      //         value: 100,
      //         name: 'Gold'
      //       },
      //       {
      //         value: 59,
      //         name: 'Forecasts'
      //       }
      //     ],
      //     animationEasing: 'cubicInOut',
      //     animationDuration: 2600
      //   }]
      // }

      this.chart.setOption(option)
      // this.autoRefresh()
    },
    autoRefresh () {
      this.timer = setInterval(() => {
        this.chart.dispose()
        this.chart = null
        this.initChart()
      }, 10000)
    }
  }
}
</script>
